<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="changeNumber()">
<h2>
    <span id="s1">1</span>
</h2>
<h2>刷新页面</h2>
<FORM action="../ajax1" method="post">
    <input name="name">
    <button>刷新提交</button>
</FORM>

<H2>不刷新页面</H2>
<input id="in1"/>
<button onclick="sendMessage()">不刷新提交</button>
</body>
</html>
<script>
    let number = 1;

    function changeNumber() {
        number++;
        let obj = document.getElementById('s1');
        obj.innerHTML = number;
        setTimeout("changeNumber()", 1000)
    }

    function sendMessage() {
        let obj = document.getElementById('in1');
        // 文本框的值
        let val = obj.value;
        // 1. 产生ajax对象
        let ajax = new XMLHttpRequest();
        // 4. 接收响应的数据
        ajax.onreadystatechange = function () {
            // 获取后端的状态码
            let status = ajax.status;
            let readyState = ajax.readyState;
            if (status === 200 && readyState === 4) {
                // 获取后端的响应数据
                let a = ajax.responseText;
                alert(a);
            }
        }
        // 2. 建立和后端controller的连接 请求方式，URL
        ajax.open('post', '../ajax2?name=' + val);
        // 3. 发送数据
        ajax.send();
    }
</script>
</body>
</html>